<template>
  <div class="container">
    <div class="specInfo">
      <div class="title">{{ orderInfo.type }}({{ orderInfo.area }}平米)</div>
      <div class="time-price">
        <div class="time"><span>服务时间：</span>{{ orderInfo.time }}</div>
        <div class="price">
          <span>价格：</span>{{ orderInfo.price * orderInfo.area }}元
        </div>
      </div>
    </div>

    <!-- 优惠券 -->
    <div class="coupon">
      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>

    <!-- 服务地址信息 -->
    <div class="addressInfo">
      <div class="title">服务地址信息</div>
      <div class="info">
        <div class="address">
          <span>服务地址：</span>{{ orderInfo.address }}
        </div>
        <div class="address"><span>联系电话：</span>{{ orderInfo.tel }}</div>
      </div>
    </div>

    <!-- 底部确认支付 -->
    <van-submit-bar
      :price="orderInfo.total * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />

    <!-- 支付界面弹出框 -->
    <van-popup v-model="isPayShow" class="payPop">
      请输入支付密码：
      <van-cell-group>
        <van-field
          v-model="payPwd"
          type="password"
          placeholder="请输入六位支付密码"
        />
      </van-cell-group>
      <van-button type="warning" block @click="confirmPay">确认支付</van-button>
    </van-popup>
  </div>
</template>

<script>
import { putOrder } from "@/api/cart";
import store from "@/store";

const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠5元",
  reason: "",
  value: 500,
  name: "优惠券名称",
  startAt: new Date(),
  endAt: new Date(),
  valueDesc: "5",
  unitDesc: "元",
};
export default {
  name: "my-order",
  data() {
    return {
      orderInfo: {},
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      chooseCoupon: false,
      isPayShow: false,
      payPwd: null,
      cb: null,
    };
  },
  created() {
    if (JSON.stringify(this.$route.params) === "{}") {
      this.$router.back();
    } else {
      this.orderInfo = this.$route.params.order;
      this.cb = this.$route.params.cb ? this.$route.params.cb : null;
    }
  },
  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
      if (index !== -1 && !this.chooseCoupon) {
        // 选中了优惠券
        this.chooseCoupon = true;
        this.orderInfo.total = this.orderInfo.total - 5;
      } else if (this.chooseCoupon && index === -1) {
        this.orderInfo.total = this.orderInfo.total + 5;
        this.chooseCoupon = false;
      }
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    // 提交订单
    async onSubmit() {
      // 修改订单状态
      this.orderInfo.state = 1;
      await putOrder(this.orderInfo.id, this.orderInfo);
      // 去支付
      this.isPayShow = true;
      if (this.cb) {
        this.cb(this.orderInfo.state);
      }
    },
    // 确认支付
    async confirmPay() {
      if (this.payPwd.trim().length !== 6) {
        this.$toast("请输入六位支付密码");
      } else {
        // 修改订单状态
        this.orderInfo.state = 2;
        await putOrder(this.orderInfo.id, this.orderInfo);
        this.$toast.success("支付成功！");
        this.isPayShow = false;
        // 跳转页面
        if (this.cb) {
          this.cb(this.orderInfo.state);
        } else {
          store.commit("cart/updateActive", this.orderInfo.state);
        }
        if (this.orderInfo) this.$router.push("/my-allorder");
      }
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.container {
  padding: 5px;
  padding-bottom: 50px;
  .specInfo {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #fff;
    .title {
      font-weight: 700;
      line-height: 50px;
      font-size: 20px;
    }
    .time-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      line-height: 20px;
      span {
        color: #999;
      }
    }
  }
  .addressInfo {
    margin-top: 10px;
    background-color: #fff;
    padding: 10px;
    .title {
      font-weight: 700;
      line-height: 50px;
      font-size: 20px;
    }
    .info {
      font-size: 14px;
      span {
        line-height: 30px;
        color: #999;
      }
    }
  }
}
.payPop {
  padding: 20px;
  width: 80%;
  /deep/ .van-cell-group {
    margin: 10px 0;
  }
}
</style>
